<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>节点</title>
    <style type="text/css">
    *{
		padding: 0px;
		margin: 0px;
	}
	#sha{
		width:600px;
		height: 600px;
		margin: 0 auto;
	}
	#sha #hen{
		width: 600px;
		height: 300px;
		border: 2px solid #F30B52;
		margin: 10px 0;
		overflow:auto;
	}
	#msha #hen .shuo{
		font-size: 15px;
		line-height: 2em;
		font-family: 微软雅黑;
		text-indent: 20px;
	}
	#liuyan{
		width: 600px;
		border: 2px solid #0D3CEB;
		height: 50px;

	}


</style>
<script type="text/javascript">
	window.onload = function(){
		var hen = document.getElementById('hen');
		var liuyan = document.getElementById('liuyan');
		var btn = document.getElementById('btn');

		btn.onclick = function(){

			var con = liuyan.value;

			if(con == ''){
				alert('');
			}else{
				var newP = document.createElement('p');
				newP.innerHTML = con;
				newP.setAttribute('class','shuo');
				hen.appendChild(newP);
				liuyan.value = '';
			}
			
		}

	}
</script>
</head>

<body>
	<div id="sha">
		<div id="hen">
			<p class="shuo">特克，你今天又迟到了</p>
			<p class="shuo">抱歉，我错了。</p>
			<p class="shuo">好吧，下次别再迟到了。</p>
			<p class="shuo">谢谢，下次不会了</p>
		</div>
		<textarea name="" id="liuyan" cols="30" rows="10"></textarea>
		<input type="button" value="上面写好再点击我" id="btn" />
	</div>
</div>  
</body>
</html>